import 'package:flutter/material.dart';

/*
 * 2019.12.10
 * DingHL
 * 取消确定弹出框页面调用示例
    //取消确定弹出框
    showDialog<Null>(
    context: context, //BuildContext对象
    barrierDismissible: true,//表示是否点击空白区域关闭对话框,默认为true，可以关闭
    builder: (BuildContext context){
    //删除提示弹出框
    return  YesNoDialog(
    height: 170,//如果提示字体过多有两行就设置170，如只要显示一行提示设置150即可
    margin: EdgeInsets.fromLTRB(40, 0, 40, 0),
    lineColor:Colors.grey[100],
    ok: "确定",
    quit: "取消",
    circular: 10,
    //标题
    title: "返回将不保留该页面的信息，确定是否返回？",
    titleFontSize: 16.0,
    //左边点击，取消
    onTapL: (){
    Navigator.pop(context);
    },
    //右边点击，确定
    onTapR: (){
    Navigator.pop(context);
    Navigator.pop(context);
    },
    //                            //点击回调,点击灰色区域取消操作
    //                             onTapPop: (){
    //                               Navigator.pop(context);
    //                              },
    );
    }
    );
 */
///todo:提示，确定取消弹出框样式
class YesNoDialog extends StatefulWidget {
  //左边点击回调
  final Function onTapL;
  //右边点击回调
  final Function onTapR;
  //灰色区域点击回调，可设置点击取消
  final Function onTapPop;
  //自定义弹出框高度
  double height;
  //自定义弹出框宽度
  double boxWidth;
  //弹框颜色
  Color bgColor;
  // 标题
  String title;
  //右边按钮文本
  String ok;
  //左边按钮文本
  String quit;
  //外边距
  EdgeInsets margin;
  //弹出框圆角
  double circular;
  //左边按钮字体颜色
  Color leftButtonTextColor;
  //右边边按钮字体颜色
  Color rightButtonTextColor;
  //按钮字体大小
  double buttonTextFontSize;
  //标题字体大小
  double titleFontSize;
  //线的颜色
  Color lineColor;
  //构造函数
  YesNoDialog({
    Key key,
    @required this.onTapL,
    @required this.onTapR,
    this.leftButtonTextColor,
    this.rightButtonTextColor: Colors.blue,
    this.buttonTextFontSize,
    this.height: 150,
    this.boxWidth,
    this.quit: "取消",
    this.ok: "确定",
    this.circular: 5,
    this.bgColor: Colors.white,
    this.title: "提示",
    this.margin,
    this.onTapPop,
    this.titleFontSize,
    this.lineColor: Colors.black12,
  }) : super(key: key);

  @override
  _YesNoDialogState createState() => _YesNoDialogState();
}

class _YesNoDialogState extends State<YesNoDialog> {
  @override
  Widget build(BuildContext context) {
    //触摸组件  使整个 半透明区域  可以点击返回
    return GestureDetector(
      //半透明区域 单击事件
      onTap: widget.onTapPop,
      child: new Material(
        //创建透明层
        type: MaterialType.transparency, //透明类型
        child: new Center(
          //保证控件居中效果
          child: new Container(
            //获取屏幕宽度
            width:
//            MediaQuery.of(context).size.width,
            widget.boxWidth ?? 300,
            //弹出框边距
            margin: widget.margin,
            height: widget.height,
            //圆角
            decoration: ShapeDecoration(
              color: widget.bgColor,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(
                  Radius.circular(widget.circular),
                ),
              ),
            ),
            //弹出框内容
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Container(
                  child: Text(
                    widget.title,
                    style: TextStyle(fontSize: widget.titleFontSize),
                  ),
                  alignment: Alignment.center,
                  margin: EdgeInsets.only(
                      top: widget.height / 4,
                      bottom: widget.height / 4,
                      left: widget.height / 8,
                      right: widget.height / 8),
                ),
                SizedBox(
                  height: 1,
                  child: Container(
                      width: MediaQuery.of(context).size.width - 40,
                      color: widget.lineColor),
                ),
                Expanded(
                    child: Container(
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: <Widget>[
                          Expanded(
                              child: InkWell(
                                child: Container(
                                  width: (MediaQuery.of(context).size.width - 40) / 2,
                                  decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.only(
                                          bottomLeft:
                                          Radius.circular(widget.circular))),
                                  child: Text(
                                    widget.quit,
                                    style: TextStyle(
                                        fontSize: widget.buttonTextFontSize,
                                        color: widget.leftButtonTextColor),
                                  ),
                                  alignment: Alignment.center,
                                ),
                                onTap: widget.onTapL,
                              )),
                          Container(
                            width: 1,
                            height: 111,
                            color: widget.lineColor,
                          ),
                          Expanded(
                            child: InkWell(
                              child: Container(
                                width: (MediaQuery.of(context).size.width - 40) / 2,
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.only(
                                        bottomRight:
                                        Radius.circular(widget.circular))),
                                child: Text(
                                  widget.ok,
                                  style: TextStyle(
                                      fontSize: widget.buttonTextFontSize,
                                      color: widget.rightButtonTextColor),
                                ),
                                alignment: Alignment.center,
                              ),
                              onTap: widget.onTapR,
                            ),
                          ),
                        ],
                      ),
                    )),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
